<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>枝芽云服务管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel="stylesheet" href="statics/css/bootstrap.minNew.css">
    <link rel="stylesheet" href="statics/css/style.css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>

<div class="header">
    <div class="container">
        <div class="row">
            <div class="logo span4">
                <h1><a href="">道合聚盈</a></h1>
            </div>
            <div class="links span8">
                <a class="home" href="https://www.iknowpuls.cn" title="道合聚盈" rel="tooltip" data-placement="bottom" data-original-title="Home"></a>
            </div>
        </div>
    </div>
</div>

<div class="register-container container" id="rrapp" v-cloak>
    <div class="row">
        <div class="iphone span5">
            <!--<img src="assets/img/iphone.png" alt="">-->
        </div>
        <div class="register span6">
            <form action="" method="post">
                <h2>枝芽云服务管理平台</h2>
                <table id="loginDiv" style="width: 98%;display: block;">
                    <tr><td colspan="3"><label for="firstname">用户名</label></td></tr>
                    <tr>
                        <td colspan="3"><input type="text" style="margin-left: -7px" maxlength="20" id="firstname" name="firstname" v-model="username" placeholder="用户名"></td>
                    </tr>
                    <tr><td colspan="3"><label for="password">密码</label></td></tr>
                    <tr>
                        <td colspan="3"><input type="password" style="margin-left: -7px" maxlength="20" id="password" name="password" v-model="password" placeholder="密码" onpaste="return false"></td>
                    </tr>
                    <tr><td colspan="3"><label for="lastname">验证码</label></td></tr>
                    <tr>
                        <td><input type="text" maxlength="5" id="lastname" name="lastname" v-model="captcha" style="width: 92%" placeholder="验证码" ></td>
                        <td style="width: 150px;text-align: center"><img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode" width="150px"></td>
                        <td style="width: 100px"><a href="javascript:;" @click="refreshCode" style="font-size: 16px;">点击刷新</a></td>
                    </tr>
                    <!-- <tr><td colspan="3"><label for="lastname">短信验证码</label></td></tr>
                    <tr>
                        <td colspan="2" style="width: 73%"><input type="text" maxlength="8" id="username" name="username" v-model="SMScode" @keyup.enter="login" placeholder="短信验证码"></td>
                        <td style="width: 100px">
                            <a href="javascript:;" @click="refreshSMSCode" style="font-size: 16px;width: 45%" id="SMSCode">获取验证码</a>
                            <span id="SMSCodeMsg"></span>
                            
                        </td>
                    </tr> -->
                    <tr>
                    	<td colspan="3">
                        	<font style="font-size: 14px"><span id="showReturnMsg" style="display: none: ;"></span></font>
                        </td>
                    </tr>
                    <tr>
                    <td colspan="3">
                    	<button type="button" @keyup.enter="login"  @click="login">登录</button>
                    </td>
                    </tr>
                </table>
				
				<table id="codeDiv" style="width: 98%;display: none;">
					<tr><td colspan="3"><label for="firstname">手机号码</label></td></tr>
                    <tr>
                        <td colspan="3"><input type="text" style="margin-left: -7px" maxlength="11" id="mobile" name="mobile"  placeholder="手机号码"></td>
                    </tr>
                    <tr><td colspan="3"><label for="lastname">短信验证码</label></td></tr>
                    <tr>
                        <td colspan="2" style="width: 73%"><input type="text" maxlength="8" id="smsCode" name="smsCode" v-model="SMScode" @keyup.enter="confirmLogin" placeholder="短信验证码"></td>
                        <td style="width: 100px">
                            <a href="javascript:;" @click="refreshSMSCode" style="font-size: 16px;width: 45%" id="SMSCode">获取验证码</a>
                            <span id="SMSCodeMsg"></span>
                        </td>
                    </tr>
                    <tr>
                    	<td colspan="3">
                        	<font style="font-size: 14px"><span id="showReturnMsg" style="display: none: ;"></span></font>
                        </td>
                    </tr>
                    <tr>
                    <td colspan="3">
                    	<button type="button" @keyup.enter="confirmLogin"  @click="confirmLogin">确认登录</button>
                    </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<div align="center" style="margin-top: 150px">Copyright &copy; 2016.湖南道盈信息技术有限公司 版权所有.</div>
<div align="center" style="margin-top: 10px;font-size: 12px">
    <a href="http://www.miibeian.gov.cn" target="_blank">备案号：湘ICP备17012799号-1</a>&nbsp;&nbsp;
    <img src="statics/image/icon-police.png">&nbsp;
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43010402000463" target="_blank">湘公网安备 43010402000463号 </a>
</div>

<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 88%; width: 1903px; z-index: -999999; position: fixed;">
    <img style="position: absolute; margin: 0px; padding: 0px; border: medium none; width: 1903px; height: 1161.7px; max-width: none; z-index: -999999; left: 0px; top: -277.348px;"
         src="statics/image/loginbj.jpg">
         
         <!-- src="http://pic.jj20.com/up/allimg/911/101416132957/161014132957-4.jpg"> -->
         <!--src="http://img95.699pic.com/photo/50060/8778.jpg_wh860.jpg">
         http://588ku.com/beijing/lansebeijing-0-default-0-8-0-0-0-4/
         http://www.17sucai.com/pins/4647.html
         -->
</div>

<!-- Javascript -->
<script src="statics/libs/jquery.min.js"></script>
<script src="statics/libs/vue.min.js"></script>
<script src="statics/libs/bootstrap.min.js"></script>
<script src="statics/libs/jquery.slimscroll.min.js"></script>
<script src="statics/libs/fastclick.min.js"></script>
<script src="statics/libs/app.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#rrapp',
        data:{
            username: '',
            password: '',
            captcha: '',
            SMScode: '',
            error: false,
            errorMsg: '',
            src: 'captcha.jpg'
        },
        beforeCreate: function(){
            if(self != top){
                top.location.href = self.location.href;
            }
        },
        methods: {
            refreshSMSCode: function(){
                clickButton();
            },
            refreshCode: function(){
                this.src = "captcha.jpg?t=" + $.now();
            },
            login: function (event) {
                var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
                $.ajax({
                    type: "POST",
                    url: "sys/login",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        if(result.code == 0){//登录成功
                            parent.location.href ='index.html';
                        }else if(result.code == 1){
                        	$('#loginDiv').hide();
                        	$('#codeDiv').show();
                        }else{
                            vm.refreshCode();
                            alert(result.msg);
                        }
                    }
                });
            },
            confirmLogin: function (event) {
            	var mobile = $('#mobile').val();
                var data = "mobile="+mobile+"&sMScode="+vm.SMScode;
                $.ajax({
                    type: "POST",
                    url: "sys/confirmLogin",
                    data: data,
                    dataType: "json",
                    success: function(result){
                        if(result.code == 0){//登录成功
                            parent.location.href ='index.html';
                        }else{
                            vm.refreshCode();
                            alert(result.msg);
                        }
                    }
                });
            }
        }
    });


    function clickButton() {
    	var mobile = $('#mobile').val();
        /* if (vm.username.trim()=="" || vm.username.trim().length == 0) {//用户名
            alert("请先输入用户名.");
            return;
        } */
        if (mobile.trim() == "" || mobile.trim().length == 0) {//手机号码
            alert("请先输入手机号码");
            return;
        }else if (!(/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(mobile))) {
            alert("手机号码填写的格式不对，请正确填写");
            return;
		}
        $.ajax({
            type:"POST",
            url:"sys/sendCode",
            data:{
	            	/* username:vm.username.trim(), */
	            	mobile:mobile.trim()
            	},
            dataType:"json",
            success:function(result){
            	console.log(result)
                if(result.code==0){
                    $("#SMSCode").hide();
                    getValidCode();
                    $('#showReturnMsg').text("短信验证码已发送至  "+result.mobile+"  请注意查收");
                    $('#showReturnMsg').show();
                }else{
                    alert(result.msg);
                    $("#SMSCode").show();
                    $("#SMSCode").text("发送验证码");
                    vm.refreshCode();
                }
            },error: function (data) {
                $("#SMSCode").show();
                $("#SMSCode").text("发送验证码");
                vm.refreshCode();
            }
        });
    }

    function getValidCode(){
        $("#SMSCodeMsg").show();
        var time = 60;
        var set = setInterval(function() {
            $("#SMSCodeMsg").text("重新获取("+(--time) + "s)")
        }, 1000);/* 等待时间 */
        setTimeout(function() {
            $("#SMSCode").show();
            $("#SMSCodeMsg").hide();
            $("#SMSCode").text("重新获取验证码");
            vm.refreshCode();
            clearInterval(set);
        }, 60000);
    }
</script>
</body>
</html>